<meta title="列表(loop)" />
<p class="lead">
    <code>loop</code>控件可用于构建列表类的显示，比如<code>grid</code>，用于把数据进行循环输出。
</p>
<h2>定义</h2>
<code>s="loop"</code>
<h2>API</h2>
<table class="table table-bordered table-striped bs-param-table">
    <tr>
        <th>方法名</th>
        <th>返回值</th>
        <th>说明</th>
    </tr>
    <tr>
        <td>empty()</td>
        <td></td>
        <td>
            清空
        </td>
    </tr>
    <tr>
        <td>setRows(datas)</td>
        <td></td>
        <td>
            为控件赋值，基本上等同于默认api<code>data(datas)</code>，调用该方法会清空现有的数据。
        </td>
    </tr>
    <tr>
        <td>addRow(rowData, mode, indentNum)</td>
        <td></td>
        <td>
            添加一个新行。参数分别为：<code>rowData</code>行数据，<code>mode</code>行追加方式，默认为<code>append</code>，<code>indentNum</code>行缩进值，默认为0。
        </td>
    </tr>
    <tr>
        <td>addRows(datas, mode, indentNum)</td>
        <td></td>
        <td>
            添加行数据。参数分别为：<code>datas</code>行数据，<code>mode</code>行追加方式，默认为<code>append</code>，<code>indentNum</code>行缩进值，默认为0。
        </td>
    </tr>
    <tr>
        <td>hideAssistRows()</td>
        <td></td>
        <td>
            清理辅助行，比如空数据提示行、准备提示行、赋值提示行等。
        </td>
    </tr>
</table>
<h2>示例</h2>
<div class="bs-example" s="sh" s-sh="{phase:'source'}" id="loopSource">
    <div style="height: 300px; overflow: auto;">
        <form class="form-inline" id="provinceSearchForm" s="form" s-form="{action: function(){S.S('#provinceLoop').refresh();}}">
            <input type="text" name="name" class="form-control" placeholder="输入名称进行查询" /> <input type="submit" class="btn btn-success" value="查找" />
        </form>
        <table class="table table-striped table-hover" style="width: 100%;">
            <thead>
                <tr>
                    <th>ID</th>
                    <th style="width: 30%;">省份名</th>
                    <th style="width: 50%;">状态</th>
                    <th style="width: 20%;">操作</th>
                </tr>
            </thead>
            <tbody s="loop" s-data="S.get('/rest/regions/0', S.N('#provinceSearchForm').serialize())" id="provinceLoop">
                <tr s-loop-role="empty" >
                    <td colspan="4">
                        <div class="s-ui-none-data-info text-center"><i class="fa fa-info-circle text-info"></i> 未查询到数据</div>
                    </td>
                </tr>
                <tr s-loop-role="loading">
                    <td colspan="4">
                        <div class="text-center" style="padding: 20px;"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></div>
                    </td>
                </tr>
                <tr s-loop-role="row" s="datac,row">
                    <td s s-data-filter="'id'"></td>
                    <td s s-data-filter="'name'"></td>
                    <td s="tpl">
                        {%if(this.status == 'VALID'){%}
                        <span class="label label-success">可用</span>
                        {%} else {%}
                        <span class="label label-default">不可用</span>
                        {%}%}
                    </td>
                    <td >
                        <input type="button" class="btn btn-sm btn-default" value="获取行数据" s-click="S.alert(JSON.stringify(this.parent().data()));" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div class="highlight" s="sh" s-sh="{sourceNode:S.N('#loopSource')}"></div>
<h2>定义行</h2>
<p class="lead">使用<code>s-loop-role="row" s="row"</code>来定义loop控件的行，我们从定义中可以看出，loop控件的行是一个名为<code>row</code>的控件，这个定义默认是必须的。</p>
<h2>辅助行</h2>
<p class="lead">辅助行提供了诸如空数据提示<code>s-loop-role="empty"</code>、数据加载提示<code>s-loop-role="loading"</code>，准备加载提示信息，当数据加载时显示数据加载提示，当数据为空时，显示空数据提示。可以操作上面的例子查看效果。</p>
<h4>获取行数据</h4>
<p class="lead">我们可以通过<code>row</code>控件的<code>data()</code>方法获取行数据，在上述例子中，我们使用<code>s-click="S.alert(JSON.stringify(this.parent().data()));"</code>获取行数据，在<code>s-click</code>的方法中，
    <code>this</code>引用指向当前的元素的Smart对象，可以参考<code>window</code>控件的鼠标事件描述。</p>